<template>
    <view class="container">
        <!-- 空白页 -->
        <view v-if="empty===true" class="empty">
            <image src="/static/emptyCart.jpg" mode="aspectFit"></image>
            <view v-if="hasLogin" class="empty-tips">
                空空如也
                <navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
                </navigator>
            </view>
            <view v-else class="empty-tips">
                空空如也
                <view class="navigator" v-if="!hasLogin" @click="navToLogin">去登陆></view>
                <navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
                </navigator>
            </view>
        </view>
        <view v-else>
            <!-- 列表 -->
            <view class="cart-list" v-show="cartInfo">
                <block v-for="(item, index) in cartInfo" :key="index">
                    <view
                            class="cart-item"
                            :class="{'b-b': index!==cartInfo.length-1}"
                    >
                        <view class="image-wrapper" @tap="navigatorDetail(item)">
                            <image :src="item.src"
                                   class="loaded"
                                   mode="aspectFill"
                                   @load="onImageLoad('cartInfo', index)"
                                   @error="onImageError('cartInfo', index)"
                            ></image>
                            <view
                                    class="yticon icon-xuanzhong2 checkbox"
                                    :class="{checked: item.selected}"
                                    @click="check('item', index)"
                            ></view>
                        </view>
                        <view class="item-right">
                            <text class="clamp title">{{item.goods_name}}</text>
                            <text class="attr">{{item.attr_val}}</text>
                            <text class="price">¥{{item.price}}</text>
                            <uni-number-box
                                    class="step"
                                    :min="1"
                                    :value="item.count"
                                    :isMin="item.count===1"
                                    :index="index"
                                    @eventChange="numberChange"
                            ></uni-number-box>
                        </view>
                        <text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text>
                    </view>
                </block>
            </view>
            <!-- 底部菜单栏 -->
            <view class="action-section">
                <view class="checkbox">
                    <image
                            :src="allChecked?'/static/selected.png':'/static/select.png'"
                            mode="aspectFit"
                            @click="check('all')"
                    ></image>
                    <view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
                        清空
                    </view>
                </view>
                <view class="total-box">
                    <text class="price">¥{{total}}</text>
                </view>
                <button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
            </view>
        </view>
    </view>
</template>

<script>
  import uniNumberBox from '@/components/uni-number-box.vue'
  import server from '../../utils/server'

  export default {
    components: {
      uniNumberBox,
    },
    data () {
      return {
        total: 0, //总价格
        allChecked: false, //全选状态  true|false
        empty: false, //空白页现实  true|false
        timer: null,
        hasLogin: false,
        cartInfo: [],
      }
    },
    onLoad () {
      this.listenData()
    },
    onShow () {
     this.listenData()
    },
    onUnload () {
      clearInterval(this.timer)
    },
    onHide () {
      clearInterval(this.timer)
    },

    methods: {
      //请求数据
      listenData () {
        this.hasLogin = this.server.islogin()
        this.cartInfo = this.server.getCartInfo()
        this.loadData()
        let that = this
        clearInterval(this.timer)
        this.timer = setInterval(function () {
          that.updateData()
        }, 1000)
      },
      updateData () {
        if (this.server.refresh(this.ServerConstants.CART_INFO_REFRESH)) {
          this.empty = false
          this.cartInfo = this.server.getCartInfo()
          this.loadData()
          server.updateRefresh(this.ServerConstants.CART_INFO_REFRESH, 0)
        }
        if (this.server.refresh(this.ServerConstants.HAS_LOGIN)) {
          this.hasLogin = this.server.islogin()
          server.updateRefresh(this.ServerConstants.HAS_LOGIN, 0)
        }

      },

      loadData () {
        this.calcTotal()  //计算总价
      },
      //监听image加载完成
      onImageLoad (key, index) {
        this.$set(this[key][index], 'loaded', 'loaded')
      },
      //监听image加载失败
      onImageError (key, index) {
        this[key][index].image = '/static/errorImage.jpg'
      },
      navToLogin () {
        uni.navigateTo({
          url: '/pages/public/login',
        })
      },
      navigatorDetail(item){
        let id = item.goods_id
        uni.navigateTo({
          url: `/pages/product/product?id=${id}`,
        })
      },
      //选中状态处理
      check (type, index) {
        if (type === 'item') {
          this.cartInfo[index].selected = !this.cartInfo[index].selected
        } else {
          const checked = !this.allChecked
          const list = this.cartInfo
          list.forEach(item => {
            item.selected = checked
          })
          this.allChecked = checked
        }
        this.server.saveCartInfo(this.cartInfo)
        this.calcTotal(type)
      },
      //数量
      numberChange (data) {
        this.cartInfo[data.index].count = data.number
        this.server.saveCartInfo(this.cartInfo)
        this.calcTotal()
      },
      //删除
      deleteCartItem (index) {
        let list = this.cartInfo
        let row = list[index]
        let id = row.id
        this.cartInfo.splice(index, 1)
        this.calcTotal()
        this.server.delCartInfoIndex(row,this.cartInfo)
        uni.hideLoading()
      },
      //清空
      clearCart () {
        uni.showModal({
          content: '清空购物车？',
          success: (e) => {
            if (e.confirm) {
              this.server.delCartInfo()
              this.calcTotal()
            }
          },
        })
      },
      //计算总价
      calcTotal () {
        let list = this.cartInfo
        if (this.server._isEmpty(list) || list.length === 0 || !(list instanceof Array)) {
          this.empty = true
          return
        }
        let total = 0
        let checked = true
        list.forEach(item => {
          if (item.selected === true) {
            total += item.price * item.count
          } else if (checked === true) {
            checked = false
          }
        })
        this.allChecked = checked
        this.total = Number(total.toFixed(2))
      },
      //创建订单
      createOrder () {
        let list = this.cartInfo
        let goodsData = []
        list.forEach(item => {
          if (item.selected) {
            goodsData.push(item)
          }
        })
        uni.navigateTo({
          url: `/pages/order/createOrder?data=${JSON.stringify({
            goodsData: goodsData,
          })}`,
        })
      },
    },
  }
</script>

<style lang='scss'>
    .container {
        padding-bottom: 134upx;
        /* 空白页 */
        .empty {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100vh;
            padding-bottom: 100upx;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            background: #fff;
            image {
                width: 240upx;
                height: 160upx;
                margin-bottom: 30upx;
            }
            .empty-tips {
                display: flex;
                font-size: $font-sm+2upx;
                color: $font-color-disabled;
                .navigator {
                    color: $uni-color-primary;
                    margin-left: 16upx;
                }
            }
        }
    }

    /* 购物车列表项 */
    .cart-item {
        display: flex;
        position: relative;
        padding: 30upx 40upx;
        .image-wrapper {
            width: 230upx;
            height: 230upx;
            flex-shrink: 0;
            position: relative;
            image {
                border-radius: 8upx;
            }
        }
        .checkbox {
            position: absolute;
            left: -16upx;
            top: -16upx;
            z-index: 8;
            font-size: 44upx;
            line-height: 1;
            padding: 4upx;
            color: $font-color-disabled;
            background: #fff;
            border-radius: 50px;
        }
        .item-right {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            position: relative;
            padding-left: 30upx;
            .title, .price {
                font-size: $font-base + 2upx;
                color: $font-color-dark;
                height: 40upx;
                line-height: 40upx;
            }
            .attr {
                font-size: $font-sm + 2upx;
                color: $font-color-light;
                height: 50upx;
                line-height: 50upx;
            }
            .price {
                height: 50upx;
                line-height: 50upx;
            }
        }
        .del-btn {
            padding: 4upx 10upx;
            font-size: 34upx;
            height: 50upx;
            color: $font-color-light;
        }
    }

    /* 底部栏 */
    .action-section {
        /* #ifdef H5 */
        margin-bottom: 100upx;
        /* #endif */
        position: fixed;
        left: 30upx;
        bottom: 30upx;
        z-index: 95;
        display: flex;
        align-items: center;
        width: 690upx;
        height: 100upx;
        padding: 0 30upx;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
        border-radius: 16upx;
        .checkbox {
            height: 52upx;
            position: relative;
            image {
                width: 52upx;
                height: 100%;
                position: relative;
                z-index: 5;
            }
        }
        .clear-btn {
            position: absolute;
            left: 26upx;
            top: 0;
            z-index: 4;
            width: 0;
            height: 52upx;
            line-height: 52upx;
            padding-left: 38upx;
            font-size: $font-base;
            color: #fff;
            background: $font-color-disabled;
            border-radius: 0 50px 50px 0;
            opacity: 0;
            transition: .2s;
            &.show {
                opacity: 1;
                width: 120upx;
            }
        }
        .total-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: right;
            padding-right: 40upx;
            .price {
                font-size: $font-lg;
                color: $font-color-dark;
            }
            .coupon {
                font-size: $font-sm;
                color: $font-color-light;
                text {
                    color: $font-color-dark;
                }
            }
        }
        .confirm-btn {
            padding: 0 38upx;
            margin: 0;
            border-radius: 100px;
            height: 76upx;
            line-height: 76upx;
            font-size: $font-base + 2upx;
            background: $uni-color-primary;
            box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
        }
    }

    /* 复选框选中状态 */
    .action-section .checkbox.checked,
    .cart-item .checkbox.checked {
        color: $uni-color-primary;
    }
</style>
